<template lang="pug">
  .userlist
    .edits
      .e-title
        .breadcrumbs 用户列表
        .el-button.el-button--danger(type="danger" @click="goadduser()") 添加用户
      .e-content(v-if="userlist.length>0")
        table.table
          tr
            th 用户名
            //- th 单位名称
            th 用户状态
            th 上次登录时间
            //- th 联系人
            //- th 联系方式
            th 用户角色
            th 操作
          tr(v-for="(item,index) in userlist" :id="item.id" :key="index" )
            td
              span.userName {{item.userName}}
              input(v-model="item.userName" style="display:none;" )
            //- td {{item.}}
            td
              span.status {{item.status}}
              input(v-model="item.status" style="display:none;text-align:center;" )
            td {{item.lastLoginTime}}
            //td {{item.contacts}}
            //td {{item.contactsPhone}}
            td
              span.roleList {{item.roleList.length>0?item.roleList[0].remark:''}}
              el-select(placeholder="请选择角色" v-model="item.role" style="width:150px;display:none;" )
                el-option(label="超级管理员" value="1")
                el-option(label="系统管理员" value="2")
                el-option(label="普通用户" value="3")
            td
              .update(v-if="!editable" @click="edit(item.id)") 修改
              .save(style="display:none;"  @click="updateuser(item)") 保存
              .del(@click="del(item.id)") 删除
      .e-nocontent(v-else) 暂无用户
    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页

    add-user(:user="isShowu" :code="organizationCode" @refreshList="queryuserlist")
</template>
<script>
  import {mapActions} from 'vuex'
  import adduser from './adduser.vue'
  export default {
    name: 'unitlist',
    props: ['orCode'],
    data() {
      return {
        organizationCode:this.orCode,
        isShowu:false,
        editable: false,
        pageNow: 1,
        pageSize: 9,
        list: [],
        pagecount: [],
        Administrator: [],
        userlist: [],
        ruleForm: {
          userName:'',
        },
      }
    },
    mounted() {
      this.queryuserlist()
    },
    components:{
      'add-user':adduser
    },
    methods: {
      ...mapActions([
        'setcanpaylist',
        'canpayupdade'
      ]),
      async queryuserlist() {
        let res = await this.$ajax.get(`xyssoManager/sysuser/queryAll?pageNow=${this.pageNow}
                                        &pageSize=${this.pageSize}&organizationCode=${this.organizationCode}`)
        let data = res.data
        if (data.code == 200) {
          this.userlist = data.data
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
          }
        }
      },
      gotopage(item) {
        console.log(item + "==" + this.pagecount)
        if (item > this.pagecount) return
        if (item < 1) return
        this.pageNow = item
        this.queryuserlist()
      },
      async sysolequery() {
        let res = await this.$ajax.get('xyssoManager/sysrole/queryAll')
      },
      goadduser() {
        this.isShowu=true
        setTimeout(()=>{
          this.isShowu = false
        },1000)
      },
      edit(id) {
        let $el = document.getElementById(id).getElementsByTagName("td");
        for (let i = 0; i < $el.length; i++) {
          if ($el[i].childNodes[1]) {
            $el[i].childNodes[0].style.display = 'none';
            $el[i].childNodes[1].style.display = 'inline-block';
          }
        }
      },
      async updateuser(item) {
        let $el = document.getElementById(item.id).getElementsByTagName("td");
        for (let i = 0; i < $el.length; i++) {
          if ($el[i].childNodes[1]) {
            $el[i].childNodes[1].style.display = 'none';
            $el[i].childNodes[0].style.display = 'inline-block';
          }
        }
        let list = {
          id: item.id,
          userName: document.getElementById(item.id).getElementsByTagName("td")[0].childNodes[1].value,
          status: document.getElementById(item.id).getElementsByTagName("td")[1].childNodes[1].value,
          role:item.role
        }
        console.log(list)
        let res = await this.$ajax.post('xyssoManager/sysuser/update', list)
        let data = res.data
        if (data.code == 200) {
          this.$message.success('修改成功')
          this.queryuserlist()
          this.$router.push('unitmanagement')
        }
      },
      async del(id) {
        let res = await this.$ajax.post('xyssoManager/sysuser/delete', {
          id: id
        })
        let data = res.data
        if (data.code == 200) {
          this.$message.success('删除成功')
          this.queryuserlist()
          this.list = this.list.filter(d => d.id != id)
        }
      }
    },
    watch:{
      orCode(cur){
        this.organizationCode = cur
        this.queryuserlist()
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .userlist
    margin 0 auto
    .edits
      width 100%
      background #fff
      border 1px solid #e0e0e0
      border-radius 5px
      .e-title
        width 100%
        height 70px
        line-height 70px
        border-bottom 1px solid #e0e0e0
        .breadcrumbs
          float left
          margin-left 30px
          font-size 18px
        .el-button
          float right
          margin-right 30px
          height 30px
          line-height 30px
          padding 0 15px
          margin-top 20px
          font-size 12px
      .e-nocontent
        text-align center
        margin 10px auto
      .e-content
        padding 20px 30px 0 30px
        .table
          width 100%
          border-spacing 0
          white-space nowrap
          th
            height 40px
            line-height 40px
            font-size 12px
            color #999999
            text-align center
            background #f5f5f5
            &:nth-child(1)
              width 10%
            &:nth-child(2)
              width 25%
            &:nth-child(3)
              width 20%
            &:nth-child(4)
              width 30%
            &:nth-child(5)
              width 15%
            &:first-child
              text-align left
              padding-left 20px
            &:last-child
              text-align right
              padding-right 85px
          td
            height 52px
            font-size 14px
            color #686868
            line-height 52px
            border-bottom 1px solid #eee
            text-align center
            box-sizing border-box
            &:nth-child(1)
              width 10%
            &:nth-child(2)
              width 25%
            &:nth-child(3)
              width 20%
            &:nth-child(4)
              width 30%
            &:nth-child(5)
              width 15%
            &:first-child
              text-align left
              padding-left 26px
            &:last-child
              text-align right
              padding-right 30px
            .update
            .del
            .save
              display inline-block
              width 50px
              text-indent 22px
              cursor pointer
              &.update
                background url('img/update.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #3e478e
              &.del
                background url('img/del.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #e75a46
                margin-left 30px
              &.save
                background url('img/save.png') no-repeat
                background-size 15px 15px
                background-position top 18px left 0
                color #38418a
    .footer
      margin-top 30px
      .m-pagination
        float right
        font-size 0
        a
          text-decoration none
          display inline-block
          width 32px
          height 32px
          border-radius 5px
          text-align center
          line-height 32px
          margin-right 10px
          font-size 12px
          color #999
          background #fff
          &.active
          &:hover
            background #e75a46
            color #fff
          &:first-of-type
            width 52px
          &:last-of-type
            width 52px
            margin-right 0
</style>


